<template>
  <!-- 通用表单form dialog  -->
  <el-dialog
    :append-to-body="true"
    :title="dialogTitle"
    :visible.sync="isshowDialogs"
    :width="dialogWidth"
    :show-close="false"
    :close-on-click-modal="false"
    :top="topHeight"
    @close="closedialog"
    :close-on-press-escape="false"
    v-if="isshowDialogs"
   
  >
    <!-- 导入数据成功显示的标题 -->
    <div slot="title" v-if="isshowimportTitle" class="dataList">
      <span>成功录入</span>
      <span>{{ importNum }}</span>
      <span>数据</span>
    </div>
    <!-- 恭喜入驻成功标题 -->
    <div slot="title" class="entertitle" v-if="enterTitle">
      <h3>恭喜您已成功入驻</h3>
      <p>
        完成以下操作即可将驾校信息展示在万骏驾考小程序和App，
        获取更多曝光机会和学员咨询信息！
      </p>
    </div>
    <!-- 关闭按钮 -->
    <i class="iconfont closeicon" @click="closepassword">&#xe6ce;</i>
    <div class="formDialogcontent">
      <slot></slot>
    </div>
    <span slot="footer" class="dialog-footer" v-if="isshowFooter">
      <el-button @click="closepassword" size="medium">取 消</el-button>
      <el-button
        type="primary"
        @click="confirmbtn"
        size="medium"
        :disabled="isabledconfirm"
        >确 定</el-button
      >
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="closepassword"
        size="medium"
        v-if="!isshowFooterBh && !isshowFooter"
        >确 定</el-button
      >
      <el-button @click="rejected" size="medium" v-if="isshowFooterBh"
        >驳回</el-button
      >
      <el-button
        type="primary"
        @click="confirmbtn"
        size="medium"
        :disabled="isabledconfirm"
        v-if="isshowFooterBh"
        >通过</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    //是否禁用确认按钮
    isabledconfirm: false,
    //是否显示入驻成功提示标题
    enterTitle: {
      type: Boolean,
      default: false,
    },
    //是否显示导入成功标题
    isshowimportTitle: {
      type: Boolean,
      default: false,
    },
    //录入了几条数据
    importNum: {
      type: Number,
      default: 0,
    },
    dialogTitle: {
      type: String,
      default: "标题",
    },
    //是否显示弹窗
    isshowDialogs: {
      type: Boolean,
      default: false,
      required: true,
    },
    //弹窗的宽度
    dialogWidth: {
      type: String,
      default: "50%",
    },
    //弹窗高度
    topHeight: {
      type: String,
      default: "10vh",
    },
    //是否显示底部按钮区域
    isshowFooter: {
      type: Boolean,
      default: true,
    },
    //驳回
    isshowFooterBh: {
      type: Boolean,
      default: false,
    },
    //是否显示确认按钮
    isshowconfirmbtn: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    //关闭弹窗的回调
    closedialog() {
      this.$emit("closetextDialog");
    },
    //关闭弹窗
    closepassword() {
      this.$emit("closetextDialog");
    },
    //驳回
    rejected() {
      this.$emit("rejected");
    },

    //确认提交按钮
    confirmbtn() {
      this.$emit("confirmbtn");
    },
  },
};
</script>

<style scoped lang='scss'>
.formDialogcontent {
  width: 100%;
}
.closeicon {
  position: absolute;
  right: 20px;
  top: 15px;
  cursor: pointer;
  font-size: 24px;
  color: hsla(0, 0%, 40%, 0.6784313725490196);
  &:hover {
    color: #4c68ef;
  }
}
.dataList {
  span {
    font-size: 18px;
    font-weight: bold;
    &:nth-child(2) {
      margin: 0 5px;
      color: #ff7850;
      font-size: 19px;
    }
  }
}
.entertitle {
  text-align: center;
  h3 {
    font-size: 24px;
    color: #333;
    margin: 10px 0;
  }
  p {
    font-size: 15px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.65);
  }
}
::v-deep {
  .el-dialog__body {
    max-height: calc(70vh - 124px);
    overflow: auto;
  }
  .el-dialog__title {
    font-weight: bold;
  }
  .el-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
    margin-top: 0 !important;
  }
}
</style>
